<!DOCTYPE html>
<html lang='en' style="filter: grayscale(100%)">
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
</head>
<body>
  <div style='background-color: aqua'>style="filter: grayscale(100%)" 网站变成灰色</div>
  <script>
    /**
     * for-of是用来遍历同步操作的
     * for-of里面用await，如果有其他操作，也会有输出顺序错误
     * for await of 是可以对异步集合进行操作
     * /
    /** ES9语法:FOR AWAIT OF 的用法 */
    function getTime(seconds){
      return new Promise(resolve=>{
        setTimeout(() => {
          resolve(seconds)
        }, seconds);
      })
    }

    async function test(){
      let arr = [getTime(2000),getTime(300),getTime(1000)]
      for await (let x of arr){
        console.log(x); // 2000  300 1000 按顺序的
      }
    }

    // test()


    const loadImg = (url) => {
      console.log('url', url);
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function() {
          resolve(url);
        };
        img.onerror = function() {
          reject(url);
        };
        img.src = url;
      })
    }

    const imgArr = [
      'https://akmer.aikucun.com/c5704c6bf306f6b6e3422f0ba3d4afb07160c842_1589856577548_29.png',
      'https://akmer.aikucun.com/99383f6a8c0d0741df738c9e6c5bf9080a299e2f_1589856577601_84.png',
      'https://akmer.aikucun.com/03ae2d94907e8ba7c6c8fc6e7d23807913a2dbe1_1589856577627_88.png',
      'https://akmer.aikucun.com/merchant-platform/075e91cf9e8b70dc911a051c8f8e6d2049140d67_1629702496275_15.jpg'
    ];
    // 1. reduce方式
    // imgArr.reduce((prePromise, it) => {
    //   console.log(prePromise, it);
    //   return prePromise.then(() => loadImg(it))
    // }, Promise.resolve())

    // 2.面向过程的方式
    // const loadImgOneByOne = (index) => {
    //   loadImg(imgArr[index]).then(() => {
    //     if (index < imgArr.length -1) {
    //       loadImgOneByOne(++index);
    //     }
    //   })
    // }
    // loadImgOneByOne(0)

    // 3. await的方式
    // const loadImage = async (dataList) => {
    //   for (let url of dataList) {
    //     await loadImg(url);
    //   }
    // }
    // loadImage(imgArr)

    // Promise基本用法
    // const aaa = Promise.resolve().then(() => {
    //   console.log(1)
    // })
    // console.log('aaa', aaa);
    // Promise.resolve().then(() => {
    //   console.log(1)
    // }).then(() => {
    //   console.log(2)
    // }).catch(() => {
    //   console.log(3)
    // }).then(() => {
    //   console.log(4)
    // })

    // 4. 并发数控制为3，加载图片
    // const loadByLimit = (list = [], limit = 3) => {
    //   const listCopy = [...list]
    //   if (listCopy.length <= limit) {
    //     const promiseArr = list.map((url) => loadImg(url))
    //     return Promise.all(promiseArr);
    //   }
    //
    //   const promiseArr = listCopy.splice(0, limit).map(url => loadImg(url));
    //   console.log('promiseArr', promiseArr); // 3
    //   console.log('listCopy', listCopy); // 1
    //
    //   listCopy.reduce((prevPromise, url) => {
    //     console.log(prevPromise, url)
    //     prevPromise
    //       .then(() => Promise.race(promiseArr))
    //       .catch((error) => { console.log(error) })
    //       .then(res => {
    //         console.log('test===', res);
    //         const position = promiseArr.findIndex(id => id === res);
    //         console.log('position===', position);
    //         /**
    //          * splice(index, howmany, item1, ..., itemX)
    //          * index: 必需。整数，指定在什么位置添加/删除项目，负值指定从数组末尾开始的位置
    //          * howmany: 可选。要删除的项目数。如果设置为 0，则不会删除任何项目
    //          * item1, ..., itemX: 可选。要添加到数组中的新项目。
    //          */
    //         promiseArr.splice(position, 1)
    //         promiseArr.push(loadImg(url))
    //       })
    //   }, Promise.resolve()).then(() => Promise.all(promiseArr))
    // }
    //
    // loadByLimit(imgArr, 3)

    // 5. 使用promise.all 进行5个请求，若其中一个失败了，怎么让其他4个成功返回
    let p1 = Promise.resolve(1)
    let p2 = Promise.resolve(2)
    let p3 = Promise.resolve(3)
    let p4 = Promise.resolve(4)
    let p5 = Promise.reject("error")
    let arr = [p1,p2,p3,p4,p5];

    let all = Promise.all(arr.map((promise) => promise.catch((e) => { console.log("错误信息"+e) } )))
    all.then(res => {
      console.log('Promise===', res);
    }).catch(err => console.log(err));


    // const fn = async () => {
    //   await loadImg(imgArr[1]);
    //   console.log(1);
    //   await fn2();
    //   console.log(2);
    //   fn3();
    //   await fn4();
    // }
    //
    // const fn2 = () => {
    //   console.log('fn2===');
    //   return loadImg(imgArr[2]);
    // }
    // const fn3 = () => {
    //   console.log('fn3====');
    // }
    //
    // const fn4 = () => {
    //   console.log('fn4===');
    //   return loadImg(imgArr[3]);
    // }
    //
    // fn();
  </script>
</body>
</html>
